<template>
	<view class="container">
		<div class="list">
			<div class="item">
				<div class="left">
					<div class="label">头像</div>
				</div>
				<div class="right">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<image class="avatar" :src="userProfile.avatar"></image>
					</button>
				</div>
			</div>
			<div class="item">
				<div class="left">
					<div class="label">昵称</div>
				</div>
				<div class="right">
					<input class="text" v-model="userProfile.nickname" type="nickname" placeholder="请输入昵称" @change="handleChange" />
					<uni-icons class="icon" type="forward" color="#111" size="13"></uni-icons>
				</div>
			</div>
			<div class="item">
				<div class="left">
					<div class="label">性别</div>
				</div>
				<div class="right">
					<picker @change="changesex" :value="userProfile.sex" :range="range">
						<input disabled :value="userProfile.sex === 0 ? '未知' : userProfile.sex === 1 ? '男' : '女'" type="nickname" class="text" placeholder="请输入性别" />
					</picker>
					<uni-icons class="icon" type="forward" color="#111" size="13"></uni-icons>
				</div>
			</div>
			<div class="item">
				<div class="left">
					<div class="label">手机号</div>
				</div>
				<div class="right">
					<input disabled :value="userProfile.phone" type="number" class="text" placeholder="请输入手机号" />
				</div>
			</div>
			<!-- <div class="item mt16">
				<div class="left">
					<div class="label">支付密码</div>
				</div>
				<div class="right">
					<div class="text">已设置</div>
				</div>
			</div> -->
		</div>
	</view>
</template>

<script>
import { memberProfile, updateProfile } from '@/api/member.js';
import { uploadAvatar64 } from '@/api/system/user.js';
export default {
	data() {
		return {
			userProfile: {},
			avatarUrl: '',
			range: ['未知', '男', '女']
		};
	},
	onShow() {
		this.fetchMemberProfile();
	},
	methods: {
		// 获取会员档案
		fetchMemberProfile(res) {
			memberProfile(res).then((res) => {
				const { avatar, nickname, sex, phone } = res.data;
				this.userProfile = {
					avatar,
					nickname,
					sex,
					phone
				};
			});
		},
		// 选择头像
		onChooseAvatar(e) {
			// this.userProfile.avatar = e.detail.avatarUrl
			console.log(e);
			uni.getFileSystemManager().readFile({
				filePath: e.detail.avatarUrl, //选择图片返回的相对路径
				encoding: 'base64', //编码格式
				success: (res) => {
					console.log(res);
					console.log('data:image/png;base64,' + res.data);
					const datas =
						'\r\n--XXX' +
						'\r\nContent-Disposition: form-data; name="file"' + //第一个参数key1:val1,固定写法以此类推
						'\r\n' +
						'\r\n' +
						'data:image/png;base64,' +
						res.data +
						'\r\n--XXX--';

					const data = '\r\n--file' + 'data:image/png;base64,' + res.data;
					// file: e.detail.avatarUrl

					// name: 'dsfdasfasdfdsaf',
					// filePath: e.detail.avatarUrl

					uploadAvatar64(datas).then((res) => {
						this.userProfile.avatar = res.data.url;
						this.$nextTick((res) => {
							this.fetchUpdateProfile();
						});
					});
				}
			});
		},
		handleChange(e) {
			this.$nextTick((res) => {
				setTimeout(() => {
					if (e.detail.value) {
						this.userProfile.nickname = e.detail.value;
						console.log(this.userProfile.nickname);
						this.fetchUpdateProfile();
					}
				}, 300);
			});
		},
		changesex(e) {
			this.userProfile.sex = e.detail.value;
			this.fetchUpdateProfile();
		},
		fetchUpdateProfile() {
			updateProfile(this.userProfile).then((res) => {
				this.$modal.msg(res.msg);
				this.fetchMemberProfile();
			});
		}
	}
};
</script>

<style lang="scss">
.container {
	background: #f8f8f8;
}

.list {
	.item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 15rpx 24rpx;
		margin-bottom: 2rpx;
		height: 102rpx;
		background: #ffffff;

		&.mt16 {
			margin-top: 16rpx;

			.text {
				margin-right: 7rpx;
			}
		}

		.left {
			.label {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #999999;
			}
		}

		.right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 520rpx;
			height: 100%;

			.avatar-wrapper {
				padding: 0;
				margin: 0;
				outline: inherit;
				min-height: inherit;
				line-height: 1;
				border: none;
				background-color: inherit;
				width: 100%;
				height: 76rpx;
				text-align: right;
				// border-radius: 50%;

				&::after {
					padding: 0;
					border: none;
				}

				.avatar {
					width: 76rpx;
					height: 76rpx;
					border-radius: 50%;
				}
			}

			picker {
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: flex-end;
				align-items: center;
			}

			.text {
				text-align: right;
				width: 100%;
				height: 100%;
			}

			.icon {
				font-weight: 600;
			}
		}
	}
}
</style>
